<template>
  <!-- 设备管理 -->
  <div>
    <!-- 条件 -->
    <el-card id="top_card" class="top_nav" :shadow="shadowShow">
      <div class="top_nav_inner">
        <div class="top_nav_left">
          <el-form label-width="0px" :inline="true" :size="optionButtonSize">
            <el-form-item>
              <!-- 绑定操作账号信息、机构名称、机构下属账号信息 -->
              <el-input
                v-model="form.serialNo"
                clearable
                style="width: 360px"
                :placeholder="
                  user_superAdmin == '1'
                    ? $t('equipmentManagement.shebei1')
                    : $t('equipmentManagement.shebei37')
                "
                @keyup.enter.native="getDetailList"
              >  
              </el-input>
            </el-form-item>
           
            <el-form-item>
              <el-button type="primary" :size="optionButtonSize" @click="getDetailList"
                >{{ $t('equipmentManagement.shebei2') }}
              </el-button>
              <el-button plain :size="optionButtonSize" @click="resetClick"
                >{{ $t('equipmentManagement.shebei3') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="top_nav_right">
          <el-button
            :size="optionButtonSize"
            type="primary"
            icon="el-icon-plus"
            @click="action('add')"
          >
            {{ $t('add.add54') }}
          </el-button>
        </div>
      </div>
    </el-card>

    <el-card id="content_card" class="equipmet_inner" :shadow="shadowShow">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('equipmentManagement.shebei5')" name="second">
          <filterColumns
            v-if="user_superAdmin == '1'"
            :list="tableHeader"
            @getTableHead="getTableHead"
          />
          <el-table
            ref="table"
            :data="tableData"
            style="width: 100%"
            :height="tableH"
            border
            size="mini"
            highlight-current-row
            current-row-key="id"
          >
            <el-table-column
              key="serialNo"
              align="center"
              prop="serialNo"
              :label="$t('equipmentManagement.shebei6')"
              show-overflow-tooltip
              min-width="150"
              v-if="selectHead.indexOf('serialNo') !== -1"
            />
            <el-table-column
              v-if="user_superAdmin == '1' && selectHead.indexOf('privateKey') !== -1"
              key="privateKey"
              align="center"
              prop="privateKey"
              :label="$t('add.add55')"
              show-overflow-tooltip
              min-width="370"
            />
            <el-table-column
              v-if="selectHead.indexOf('deviceType') !== -1"
              key="deviceType"
              align="center"
              prop="deviceType"
              :label="$t('equipmentManagement.shebei97')"
              show-overflow-tooltip
              min-width="150"
            >
              <template slot-scope="props">
                <span v-show="props.row.deviceType == '1'">{{
                  $t('equipmentManagement.shebei134')
                }}</span>
                <span v-show="props.row.deviceType == '2'">{{
                  $t('equipmentManagement.shebei135')
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              v-if="user_superAdmin == '1' && selectHead.indexOf('deviceOrderControl') !== -1"
              key="deviceOrderControl"
              align="center"
              prop="deviceOrderControl"
              :label="$t('equipmentManagement.shebei112')"
              show-overflow-tooltip
              min-width="150"
            >
              <template slot-scope="props">
                <span v-show="props.row.deviceOrderControl == '0'">{{
                  $t('equipmentManagement.shebei101')
                }}</span>
                <span v-show="props.row.deviceOrderControl == '1'">{{
                  $t('equipmentManagement.shebei102')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="user_superAdmin == 1 && selectHead.indexOf('clientVersion') !== -1"
              key="clientVersion"
              align="center"
              prop="clientVersion"
              :label="$t('equipmentManagement.shebei98')"
              show-overflow-tooltip
              min-width="150"
            />
            <el-table-column
              v-if="user_superAdmin == '1' && selectHead.indexOf('deviceStatus') !== -1"
              align="center"
              key="deviceStatus"
              prop="deviceStatus"
              :label="$t('equipmentManagement.shebei8')"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="props">
                <!-- 删除 -->
                <span v-if="props.row.deviceStatus == 0">{{ $t('add.add61') }}</span>
                <!-- 锁定 -->
                <span v-if="props.row.deviceStatus == 1">{{ $t('add.add56') }}</span>
                <!-- 激活 -->
                <span v-if="props.row.deviceStatus == 2">{{ $t('add.add57') }}</span>
                <!-- 开放 -->
                <span v-if="props.row.deviceStatus == 4">{{ $t('add.add59') }}</span>

                <!-- {{ enumUtils.deviceStatus.get(props.row.deviceStatus) }} -->
              </template>
            </el-table-column>
            <el-table-column
              v-if="user_superAdmin == 1 && selectHead.indexOf('businessStatus') !== -1"
              key="businessStatus"
              align="center"
              prop="businessStatus"
              :label="$t('equipmentManagement.shebei99')"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="props">
                <span v-show="props.row.businessStatus == '0'">{{
                  $t('equipmentManagement.shebei101')
                }}</span>
                <span v-show="props.row.businessStatus == '1'">{{
                  $t('equipmentManagement.shebei102')
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              v-if="selectHead.indexOf('bindStatus') !== -1"
              key="bindStatus"
              align="center"
              prop="bindStatus"
              :label="$t('equipmentManagement.shebei13')"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="props">
                <span v-show="props.row.bindStatus == '1'">
                  {{ $t('equipmentManagement.shebei14') }}
                </span>
                <span v-show="props.row.bindStatus == '2'">
                  {{ $t('add.add58') }}
                </span>
              </template>
            </el-table-column>

            <el-table-column
              v-if="user_superAdmin == 0 && selectHead.indexOf('binderTime') !== -1"
              key="binderTime"
              align="center"
              prop="binderTime"
              :label="$t('equipmentManagement.shebei137')"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              v-if="user_superAdmin == 0 && selectHead.indexOf('institutionalBinder') !== -1"
              key="institutionalBinder"
              align="center"
              prop="institutionalBinder"
              :label="$t('equipmentManagement.shebei138')"
              show-overflow-tooltip
              min-width="120"
            />

            <el-table-column
              v-if="user_superAdmin == '1' && selectHead.indexOf('partnerDeptName') !== -1"
              align="center"
              key="partnerDeptName"
              prop="partnerDeptName"
              :label="$t('add.add74')"
              min-width="200"
              show-overflow-tooltip
            />
            <!-- <el-table-column align="center" prop="" label="授权机构">

            </el-table-column>
            <el-table-column align="center" prop="" label="订单模板">

            </el-table-column> -->
            <!-- <el-table-column align="center" prop="orderTemplateName"
                :label="$t('equipmentManagement.shebei16')"></el-table-column> -->

            <el-table-column
              v-if="user_superAdmin == '1' && selectHead.indexOf('probationaryPeriod') !== -1"
              align="center"
              key="probationaryPeriod"
              prop="probationaryPeriod"
              :label="$t('equipmentManagement.shebei123')"
              show-overflow-tooltip
              min-width="200"
            />
            <el-table-column
              v-if="user_superAdmin == '1' && selectHead.indexOf('trialEndTime') !== -1"
              align="center"
              key="trialEndTime"
              prop="trialEndTime"
              :label="$t('equipmentManagement.shebei124')"
              show-overflow-tooltip
              min-width="200"
            />
            <el-table-column
              v-if="user_superAdmin == '1' && selectHead.indexOf('cycle') !== -1"
              align="center"
              key="cycle"
              prop="cycle"
              :label="$t('equipmentManagement.shebei125')"
              show-overflow-tooltip
              min-width="200"
            />
            <el-table-column
              v-if="user_superAdmin == '1' && selectHead.indexOf('lockDate') !== -1"
              align="center"
              key="lockDate"
              prop="lockDate"
              :label="$t('equipmentManagement.shebei126')"
              show-overflow-tooltip
              min-width="200"
            />

            <el-table-column
              v-if="user_superAdmin == '1' && selectHead.indexOf('createDate') !== -1"
              key="createDate"
              align="center"
              prop="createDate"
              :label="$t('add.add134')"
              show-overflow-tooltip
              min-width="200"
            />
            <el-table-column
              v-if="user_superAdmin == '1' && selectHead.indexOf('creatorName') !== -1"
              key="creatorName"
              align="center"
              prop="creatorName"
              :label="$t('add.add133')"
              show-overflow-tooltip
              min-width="200"
            />
            <el-table-column
              align="center"
              :label="$t('equipmentManagement.shebei17')"
              show-overflow-tooltip
              min-width="320"
              fixed="right"
            >
              <template slot-scope="scope" style="display: flex; justify-content: flex-start">
                <span class="operation_box">
                  <!-- 后台 -->
                  <span v-show="user_superAdmin == '1'">
                    <!-- 设备订单控制-无限制(只有编辑 和 删除) -->
                    <span v-show="scope.row.deviceOrderControl === '0'">
                      <!-- 编辑(除了删除状态其他的都有) -->
                      <el-button
                        v-show="scope.row.deviceStatus != '0'"
                        type="text"
                        :size="tableButtonSize"
                        @click="action('edit', scope.row)"
                        ><span>{{ $t('equipmentManagement.shebei18') }}</span></el-button
                      >
                      <!-- 删除 -->
                      <el-button
                        v-show="scope.row.deviceStatus != '0'"
                        v-if="user_superAdmin == 1"
                        type="text"
                        :size="tableButtonSize"
                        @click="deleteItem(scope.row, '0')"
                      >
                        {{ $t('equipmentManagement.shebei65') }}
                      </el-button>

                      <!-- 查看删除原因 -->
                      <el-button
                        v-show="scope.row.deviceStatus == '0'"
                        v-if="user_superAdmin == 1"
                        type="text"
                        :size="tableButtonSize"
                        @click="viewDeleteReason(scope.row)"
                      >
                        {{ $t('equipmentManagement.shebei103') }}
                      </el-button>
                    </span>
                    <!-- 设备订单控制-有限制 -->
                    <span v-show="scope.row.deviceOrderControl === '1'">
                      <!-- 设备状态已锁定 -->
                      <span v-show="scope.row.deviceStatus == '1'">
                        <!-- 编辑 -->

                        <el-button
                          type="text"
                          :size="tableButtonSize"
                          @click="action('edit', scope.row)"
                          ><span>{{ $t('equipmentManagement.shebei18') }}</span></el-button
                        >

                        <!-- 激活 -->

                        <el-button
                          type="text"
                          :size="tableButtonSize"
                          @click="equipmentActivationHandle(scope.row, '2')"
                          ><span>{{ $t('equipmentManagement.shebei75') }}</span></el-button
                        >

                        <!-- 开放 -->

                        <el-button
                          type="text"
                          :size="tableButtonSize"
                          @click="equipmentActivationHandle(scope.row, '4')"
                          ><span>{{ $t('equipmentManagement.shebei76') }}</span></el-button
                        >

                        <!-- 删除 -->

                        <el-button
                          v-if="user_superAdmin == 1"
                          type="text"
                          :size="tableButtonSize"
                          @click="deleteItem(scope.row, '0')"
                        >
                          {{ $t('equipmentManagement.shebei65') }}
                        </el-button>
                      </span>

                      <!-- 设备状态已激活 -->
                      <span v-show="scope.row.deviceStatus == '2'">
                        <!-- 编辑 -->

                        <el-button
                          type="text"
                          :size="tableButtonSize"
                          @click="action('edit', scope.row)"
                          ><span>{{ $t('equipmentManagement.shebei18') }}</span></el-button
                        >

                        <!-- 锁定 -->

                        <el-button
                          type="text"
                          :size="tableButtonSize"
                          @click="equipmentActivationHandle(scope.row, '1')"
                          ><span>{{ $t('equipmentManagement.shebei74') }}</span></el-button
                        >

                        <!-- 开放 -->

                        <el-button
                          type="text"
                          :size="tableButtonSize"
                          @click="equipmentActivationHandle(scope.row, '4')"
                          ><span>{{ $t('equipmentManagement.shebei76') }}</span></el-button
                        >
                        <!-- 联网周期设置 -->
                        <el-popover
                          v-if="scope.row.deviceStatus == 2 || scope.row.deviceStatus == 3"
                          :ref="scope.row.id"
                          placement="bottom"
                          width="470"
                        >
                          <div class="set_cycle_box">
                            <el-row>
                              <el-col :span="8">
                                <span class="set_cycle_title">{{
                                  $t('equipmentManagement.shebei116')
                                }}</span>
                              </el-col>
                              <el-col :span="6">
                                <el-select
                                  size="small"
                                  v-model="cycleObj.isProbationTerm"
                                  :placeholder="$t('equipmentManagement.shebei92')"
                                  @change="calculateDate('trialEndTime')"
                                >
                                  <el-option
                                    v-for="item in cycleOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                  />
                                </el-select>
                              </el-col>
                              <el-col
                                :span="10"
                                class="interval_box"
                                v-show="cycleObj.isProbationTerm === '1'"
                              >
                                <el-input
                                  size="small"
                                  v-model="cycleObj.probationaryPeriod"
                                  type="number"
                                  min="1"
                                  :placeholder="$t('equipmentManagement.shebei122')"
                                  @blur="calculateDate('trialEndTime')"
                                />
                                <span>&nbsp;{{ $t('equipmentManagement.shebei89') }}</span>
                              </el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="8">
                                <span class="set_cycle_title">{{
                                  $t('equipmentManagement.shebei117')
                                }}</span>
                              </el-col>
                              <el-col :span="9">
                                <span>{{ cycleObj.trialStartTime }}</span>
                              </el-col>
                              <el-col :span="7" class="interval_box" />
                            </el-row>
                            <el-row>
                              <el-col :span="8">
                                <span class="set_cycle_title">{{
                                  $t('equipmentManagement.shebei128')
                                }}</span>
                              </el-col>
                              <el-col :span="9">
                                <span>{{ cycleObj.trialEndTime }}</span>
                              </el-col>
                              <el-col :span="7" class="interval_box" />
                            </el-row>

                            <el-row>
                              <el-col :span="8">
                                <span class="set_cycle_title">{{
                                  $t('equipmentManagement.shebei119')
                                }}</span>
                              </el-col>
                              <el-col :span="6">
                                <el-select
                                  size="small"
                                  v-model="cycleObj.isCycleTerm"
                                  :placeholder="$t('equipmentManagement.shebei92')"
                                  @change="calculateDate('lockDate')"
                                >
                                  <el-option
                                    v-for="item in cycleOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                  />
                                </el-select>
                              </el-col>
                              <el-col
                                :span="10"
                                class="interval_box"
                                v-show="cycleObj.isCycleTerm === '1'"
                              >
                                <el-input
                                  size="small"
                                  v-model="cycleObj.cycle"
                                  type="number"
                                  :min="0"
                                  :max="720"
                                  :placeholder="$t('equipmentManagement.shebei131')"
                                  @blur="calculateDate('lockDate')"
                                />
                                <span>&nbsp;{{ $t('equipmentManagement.shebei130') }}</span>
                              </el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="8">
                                <span class="set_cycle_title">{{
                                  $t('equipmentManagement.shebei120')
                                }}</span>
                              </el-col>
                              <el-col :span="9">
                                <span>{{ cycleObj.networkOutageDate }}</span>
                              </el-col>
                              <el-col :span="7" class="interval_box" />
                            </el-row>
                            <el-row>
                              <el-col :span="8">
                                <span class="set_cycle_title">{{
                                  $t('equipmentManagement.shebei121')
                                }}</span>
                              </el-col>
                              <el-col :span="9">
                                <span>{{ cycleObj.lockDate }}</span>
                              </el-col>
                              <el-col :span="7" class="interval_box" />
                            </el-row>
                          </div>
                          <div style="text-align: right; margin: 0">
                            <el-button
                              size="mini"
                              type="text"
                              @click="networkingCance(cycleObj.id)"
                              >{{ $t('add.add31') }}</el-button
                            >
                            <el-button
                              type="primary"
                              size="mini"
                              @click="networkingSubmit(cycleObj)"
                              >{{ $t('add.add30') }}</el-button
                            >
                          </div>
                          <el-button
                            slot="reference"
                            type="text"
                            :size="tableButtonSize"
                            @click="sureCycle(scope.row)"
                          >
                            {{ $t('equipmentManagement.shebei85') }}
                          </el-button>
                        </el-popover>
                        <!-- 删除 -->

                        <el-button
                          v-if="user_superAdmin == 1"
                          type="text"
                          :size="tableButtonSize"
                          @click="deleteItem(scope.row, '0')"
                        >
                          {{ $t('equipmentManagement.shebei65') }}
                        </el-button>
                      </span>

                      <!-- 设备状态已开放 -->
                      <span v-show="scope.row.deviceStatus == '4'">
                        <!-- 编辑 -->
                        <el-button
                          type="text"
                          :size="tableButtonSize"
                          @click="action('edit', scope.row)"
                          ><span>{{ $t('equipmentManagement.shebei18') }}</span></el-button
                        >
                        <!-- 锁定 -->
                        <el-button
                          type="text"
                          :size="tableButtonSize"
                          @click="equipmentActivationHandle(scope.row, '1')"
                          ><span>{{ $t('equipmentManagement.shebei74') }}</span></el-button
                        >
                        <!-- 激活 -->
                        <el-button
                          type="text"
                          :size="tableButtonSize"
                          @click="equipmentActivationHandle(scope.row, '2')"
                          ><span>{{ $t('equipmentManagement.shebei75') }}</span></el-button
                        >
                        <!-- 删除 -->
                        <el-button
                          v-if="user_superAdmin == 1"
                          type="text"
                          :size="tableButtonSize"
                          @click="deleteItem(scope.row, '0')"
                        >
                          {{ $t('equipmentManagement.shebei65') }}
                        </el-button>
                      </span>

                      <!-- 设备状态已删除 -->
                      <span v-show="scope.row.deviceStatus == '0'">
                        <!-- 查看删除原因 -->
                        <el-button
                          v-if="user_superAdmin == 1"
                          type="text"
                          :size="tableButtonSize"
                          @click="viewDeleteReason(scope.row)"
                        >
                          {{ $t('equipmentManagement.shebei103') }}
                        </el-button>
                      </span>
                    </span>

                    <!-- 设备绑定 -->
                    <span v-show="scope.row.deviceStatus != '0' && scope.row.bindStatus == '2'">
                      <el-button
                        type="text"
                        :size="tableButtonSize"
                        @click="jiebang(scope.row, $t('equipmentManagement.shebei84'))"
                        ><span>{{ $t('equipmentManagement.shebei77') }}</span></el-button
                      >
                    </span>

                    <!-- 设备未绑定 -->
                    <span v-show="scope.row.deviceStatus != '0' && scope.row.bindStatus == '1'">
                      <el-button
                        type="text"
                        :size="tableButtonSize"
                        @click="equipmentEditHandle(scope.row)"
                        ><span>{{ $t('equipmentManagement.shebei73') }}</span></el-button
                      >
                    </span>
                  </span>
                  <!-- 前台（技工所） -->
                  <span v-show="user_superAdmin == '0'">
                    <el-button
                      type="text"
                      :size="tableButtonSize"
                      @click="jiebang(scope.row, $t('equipmentManagement.shebei84'))"
                      ><span>{{ $t('equipmentManagement.shebei77') }}</span></el-button
                    >
                  </span>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              v-if="user_superAdmin == '1'"
              align="center"
              :label="$t('equipmentManagement.shebei104')"
              show-overflow-tooltip
              min-width="100"
              fixed="right"
            >
              <template slot-scope="scope" style="display: flex; justify-content: flex-start">
                <el-button type="text" @click="viewOperationRecords(scope.row)">{{
                  $t('add.add045')
                }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- <el-tab-pane v-if="user_superAdmin != 1" :label="$t('equipmentManagement.shebei19')" name="first">
          <el-table :data="orderTemplateArr" style="width: 100%" size="mini" :header-cell-style="headercellstyle">
            <el-table-column align="center" prop="name" :label="$t('equipmentManagement.shebei20')" />
            <el-table-column align="center" prop="creatorName" :label="$t('equipmentManagement.shebei21')" />
            <el-table-column align="center" prop="orderTemplateType" :label="$t('equipmentManagement.shebei22')">
              <template slot-scope="props">
                {{
                  props.row.orderTemplateType == 1
                  ? $t('equipmentManagement.shebei23')
                  : $t('equipmentManagement.shebei24')
                }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="propList" :label="$t('equipmentManagement.shebei25')">
              <template slot-scope="props">
                <p v-for="(item, index) in props.row.propList" :key="index">
                  {{ item.propName }}：{{ item.propValue }}
                </p>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('equipmentManagement.shebei26')" min-width="150">
              <template slot-scope="scope" style="display: flex; justify-content: flex-start">
                <el-button type="text" :size="tableButtonSize" @click="firstEdit(scope.row.id)">{{
                  $t('equipmentManagement.shebei27') }}
                </el-button>
                <el-button type="text" :size="tableButtonSize" @click="firstDelete(scope.row.id)">{{
                  $t('equipmentManagement.shebei28') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane> -->
      </el-tabs>
      <div style="margin: 16px 0; text-align: right">
        <el-pagination
          background
          :current-page.sync="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <waterTable
        ref="waterTable"
        @closeWaterTable="
          isShowWaterTable = false;
          tableH = 570;
        "
        v-show="isShowWaterTable"
        :serialNo="currWaterData.serialNo"
      />
    </el-card>

    <OrderTemplate ref="OrderTemplate" @getOrderTemplate="getOrderTemplate" />
    <EquipmentAdd
      v-if="actionType === 'edit' || actionType === 'add'"
      ref="EquipmentAdd"
      :detailData="currRow"
      @getDetailList="getDetailList"
      @closeAdd="closeAdd"
    />
    <EquipmentEdit ref="EquipmentEdit" :detailData="currRow" @getDetailList="getDetailList" />

    <el-dialog
      :title="
        isDeleteView ? $t('equipmentManagement.shebei103') : $t('equipmentManagement.shebei28')
      "
      :visible.sync="deletedialogVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="deleteRow" :rules="deleteFormRules" ref="deleteForm" label-width="100px">
        <el-form-item :label="$t('equipmentManagement.shebei108')" prop="deletionReason">
          <el-input
            :disabled="isDeleteView"
            type="textarea"
            :rows="3"
            :placeholder="$t('equipmentManagement.shebei133')"
            v-model="deleteRow.deletionReason"
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button v-show="!isDeleteView" @click="deletedialogVisible = false">
          {{ $t('equipmentManagement.shebei32') }}
        </el-button>
        <el-button type="primary" @click="submitDelete">
          {{ $t('equipmentManagement.shebei31') }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addDays, addHours } from '@/utils/index';
import OrderTemplate from './ordertemplate.vue'; // 订单模板
import EquipmentAdd from './equipmentadd.vue'; // 设备添加
import EquipmentEdit from './equipmentEdit.vue'; // 设备编辑
import { formatDate } from '@/utils/index';

import waterTable from './waterTable.vue';
import filterColumns from '@/components/filterColumns/index.vue';
export default {
  name: 'BLZMasterIndex',
  components: {
    OrderTemplate,
    EquipmentAdd,
    EquipmentEdit,
    waterTable,
    filterColumns,
  },
  data() {
    return {
      activeName: 'second',
      form: {
        name: '', // 订单模版
        creatorName: '', // 创建人
        orderTemplateType: '', // 模板类型
        serialNo: '', // 序列号
        propList: [],
        deviceStatus: '', // 设备状态
        orderTemplateName: '', // 订单模板
        type: '1',
      },
      oldTableData: [],
      tableData: [],
      page: 1, // 默认第1页
      total: 0, // 总条数
      limit: 10, // 每页条数
      orderTemplateArr: [], // 订单模板数据
      partnerList: [],
      user_superAdmin: '',

      /***
       * 动态表头
       */
      tableHeader: [
        {
          label: this.$t('equipmentManagement.shebei6'),
          value: 'serialNo',
        },
        {
          label: this.$t('add.add55'),
          value: 'privateKey',
        },
        {
          label: this.$t('equipmentManagement.shebei97'),
          value: 'deviceType',
        },
        {
          label: this.$t('equipmentManagement.shebei112'),
          value: 'deviceOrderControl',
        },
        {
          label: this.$t('equipmentManagement.shebei98'),
          value: 'clientVersion',
        },
        {
          label: this.$t('equipmentManagement.shebei8'),
          value: 'deviceStatus',
        },
        {
          label: this.$t('equipmentManagement.shebei99'),
          value: 'businessStatus',
        },
        {
          label: this.$t('equipmentManagement.shebei13'),
          value: 'bindStatus',
        },
        {
          label: this.$t('equipmentManagement.shebei137'),
          value: 'binderTime',
        },
        {
          label: this.$t('equipmentManagement.shebei138'),
          value: 'institutionalBinder',
        },
        {
          label: this.$t('add.add74'),
          value: 'partnerDeptName',
        },
        {
          label: this.$t('equipmentManagement.shebei123'),
          value: 'probationaryPeriod',
        },
        {
          label: this.$t('equipmentManagement.shebei124'),
          value: 'trialEndTime',
        },
        {
          label: this.$t('equipmentManagement.shebei125'),
          value: 'cycle',
        },
        {
          label: this.$t('equipmentManagement.shebei91'),
          value: 'lockDate',
        },
        {
          label: this.$t('add.add134'),
          value: 'createDate',
        },
        {
          label: this.$t('add.add133'),
          value: 'creatorName',
        },
      ],
      selectHead: [],
      /***
       * 设置周期部分内容
       *
       */

      cycleOption: [
        {
          label: this.$t('equipmentManagement.shebei102'),
          value: '1',
        },
        {
          label: this.$t('equipmentManagement.shebei101'),
          value: '0',
        },
      ],
      // 保存联网周期设置当前点击的对象
      oldCycleObj: {},
      cycleObj: {},
      // 是否展示流水表
      isShowWaterTable: false,
      currWaterData: {},
      // 主表高度
      tableH: 570,

      actionType: '',
      currRow: {},

      deletedialogVisible: false,
      deleteRow: {},
      // 区分是查看 删除原因还是 删除
      isDeleteView: false,

      // 删除情况下表单校验
      deleteFormRules: {
        deletionReason: [
          {
            required: true,
            message: this.$t('equipmentManagement.shebei133'),
            trigger: 'change',
          },
        ],
      },
    };
  },

  created() {
    this.getDetailList();

    this.selectHead = this.tableHeader.map((m) => m.value);

    // this.getPartnerList();
  },
  mounted() {
    this.user_superAdmin = localStorage.getItem('user_superAdmin');
    this.$clacTableHeight();
  },
  methods: {
    getTableHead(data) {
      let nameArr = JSON.parse(JSON.stringify(data));
      nameArr.forEach((item, index) => {
        this.tableHeader.forEach((item1) => {
          if (item === item1.label) {
            nameArr[index] = item1.value;
          }
        });
      });
      this.selectHead = nameArr;
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    // 重置
    resetClick() {
      this.form = {
        name: '', // 订单模版
        creatorName: '', // 创建人
        orderTemplateType: '', // 模板类型
        serialNo: '', // 序列号
        propList: [],
        deviceStatus: '', // 设备状态
        orderTemplateName: '', // 订单模板
        type: '1',
      };
      this.page = 1; // 默认第1页
      this.total = 0; // 总条数
      this.limit = 10; // 每页条数
      this.orderTemplateArr = []; // 订单模板数据
      this.partnerList = [];
      this.getDetailList();
      this.getOrderTemplate();
    },
    // 拿订单模板管理 表单数据
    getOrderTemplate() {
      this.$http
        .get(`/orderTemplate/page?page=${this.page}&limit=${this.limit}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.orderTemplateArr = res.data.list.list;
            this.total = res.data.list.total;
            if (this.orderTemplateArr.length <= 0 && this.page > 1) {
              this.page -= 1;
              this.getOrderTemplate();
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 合作伙伴数据
    getPartnerList() {
      this.$http
        .get('/partner/page?page=1&limit=2999')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.partnerList = res.data.list;
            if (this.partnerList.length > 0) {
              this.$refs.EquipmentEdit.partnerList = this.partnerList;
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 拿设备列表 表单数据
    getDetailList() {
      this.$http
        .get(`/device/page?page=${this.page}&limit=${this.limit}&serialNo=${this.form.serialNo}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;

            this.tableData.forEach((item) => {
              if (item.deviceStatus == 2) {
                // 已激活状态下需要判断时间是否是空
                if (!item.probationaryPeriod) {
                  item.trialEndTime = '//-//';
                }
                if (!item.cycle) {
                  item.lockDate = '//-//';
                }
              }
            });
            this.oldTableData = JSON.parse(JSON.stringify(this.tableData));
            this.total = res.data.total;
            if (this.tableData.length <= 0 && this.page > 1) {
              this.page -= 1;
              this.getDetailList();
            }

            let waterTableRef = this.$refs.waterTable;
            waterTableRef.toQuery();
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    closeAdd() {
      this.actionType = '';
    },
    // tab切换
    handleClick(tab) {
      this.page = 1; // 默认第1页
      this.limit = 10; // 每页条数
      if (tab.name == 'second') {
        this.form.typeshebei77 = '1';
        this.getDetailList();
      } else if (tab.name == 'first') {
        this.form.type = '2';
        this.getOrderTemplate();
      }
    },

    // 设备列表编辑
    equipmentEditHandle(row) {
      this.currRow = row;
      this.$refs.EquipmentEdit.dialogShow = true;
    },

    // 查看删除原因
    viewDeleteReason(row) {
      this.isDeleteView = true;
      this.deleteRow = row;
      this.deletedialogVisible = true;
    },
    jiebang(row, type) {
      const lang = localStorage.getItem('lang');
      this.$confirm(
        this.$t('add.add68') +
          (lang !== 'cn' ? ` ${type} ` : `${type}`) +
          this.$t('add.add69') +
          '?',
        this.$t('add.add140'),
        {
          confirmButtonText: this.$t('add.add142'),
          cancelButtonText: this.$t('add.add203'),
          type: 'warning',
        },
      )
        .then(async () => {
          this.$http
            .post('/device/unbind', row)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('equipmentManagement.shebei80'));
                this.getDetailList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },
    // 编辑新增操作
    action(type, row) {
      // 设备新建
      if (type === 'edit' && row) {
        this.currRow = JSON.parse(JSON.stringify(row));
      } else {
        this.currRow = {};
      }
      this.actionType = type;
      this.$nextTick(() => {
        this.$refs.EquipmentAdd.dialogShow = true;
      });
    },
    // 激活
    equipmentActivationHandle(row, type) {
      let user_realName = window.localStorage.getItem('user_realName');
      let user_id = window.localStorage.getItem('user_id');
      row['type'] = type;
      row['updaterUser'] = user_realName;
      row['updater'] = user_id;
      let text = '';
      let successtext = '';
      if (type == '2') {
        text = this.$t('equipmentManagement.shebei81');
        successtext = this.$t('equipmentManagement.shebei10');
      } else if (type == '1') {
        text = this.$t('equipmentManagement.shebei82');
        successtext = this.$t('equipmentManagement.shebei9');
      } else if (type == '4') {
        text = this.$t('equipmentManagement.shebei83');
        successtext = this.$t('equipmentManagement.shebei12');
      }
      const lang = localStorage.getItem('lang');

      this.$confirm(
        this.$t('add.add68') +
          (lang !== 'cn' ? ` ${text} ` : `${text}`) +
          this.$t('add.add69') +
          '?',
        this.$t('add.add140'),
        {
          confirmButtonText: this.$t('add.add142'),
          cancelButtonText: this.$t('add.add203'),
          type: 'warning',
        },
      )
        .then(() => {
          this.activeAjax(successtext, row);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },
    // 开放等公共接口
    activeAjax(successtext, row) {
      this.$http
        .post('/device/active', row)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            if (row.type == '0') {
              this.deletedialogVisible = false;
            }
            this.$message.success(`${successtext}`);
            this.getDetailList();
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    deleteItem(row, type) {
      this.isDeleteView = false;
      this.deletedialogVisible = true;
      this.deleteRow = row;
      this.deleteRow.type = type;
    },
    submitDelete() {
      this.$refs['deleteForm'].validate((valid) => {
        if (valid) {
          if (!this.isDeleteView) {
            this.activeAjax(this.$t('equipmentManagement.shebei33'), this.deleteRow);
          } else {
            this.deletedialogVisible = false;
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 查看操作记录
    viewOperationRecords(row) {
      this.currWaterData = row;

      this.tableH = 270;

      this.isShowWaterTable = true;
    },

    handleSizeChange(val) {
      this.limit = val;
      if (this.activeName == 'first') {
        this.getOrderTemplate();
      } else {
        this.getDetailList();
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      if (this.activeName == 'first') {
        this.getOrderTemplate();
      } else {
        this.getDetailList();
      }
    },

    /**
     * 联网周期设置
     */
    // 定义一个方法来计算时间
    calculateDate(type) {
      this.cycleObj.probationaryPeriod = Number(this.cycleObj.probationaryPeriod);
      this.cycleObj.cycle = Number(this.cycleObj.cycle);
      if (type === 'trialEndTime') {
        // 预计试用期到期时间
        if (this.cycleObj.isProbationTerm == '0') {
          // 没限制
          this.cycleObj.trialEndTime = '//-//';
          this.cycleObj.probationaryPeriod = '';
        } else {
          if (!Number.isInteger(this.cycleObj.probationaryPeriod)) {
            this.cycleObj.probationaryPeriod = 0;
            return this.$message({
              message: this.$t('equipmentManagement.shebei95'),
              type: 'warning',
            });
          }
          // 有限制
          if (this.cycleObj.probationaryPeriod < 1) {
            // this.cycleObj.probationaryPeriod = 1;
            this.cycleObj.probationaryPeriod = 0;
            return this.$message({
              message: this.$t('equipmentManagement.shebei95'),
              type: 'warning',
            });
          } else {
            if (this.cycleObj.trialStartTime) {
              this.cycleObj.trialEndTime = addDays(
                this.cycleObj.trialStartTime,
                this.cycleObj.probationaryPeriod,
              );
            } else {
              this.cycleObj.trialEndTime = '//-//';
            }
          }
        }
      } else if (type === 'lockDate') {
        // 预计试用期到期时间
        if (this.cycleObj.isCycleTerm == '0') {
          // 没限制
          this.cycleObj.lockDate = '//-//';
          this.cycleObj.cycle = '';
        } else {
          // 有限制

          if (
            this.cycleObj.cycle === '' ||
            this.cycleObj.cycle === undefined ||
            this.cycleObj.cycle === null
          ) {
            this.cycleObj.cycle = 0;
            return this.$message({
              message: this.$t('equipmentManagement.shebei132'),
              type: 'warning',
            });
          } else {
            if (!Number.isInteger(this.cycleObj.cycle)) {
              // 小数
              let tempStr = String(this.cycleObj.cycle).split('.')[1];
              if (tempStr.length > 1) {
                this.cycleObj.cycle = 0;
                return this.$message({
                  message: this.$t('equipmentManagement.shebei132'),
                  type: 'warning',
                });
              }
            } else {
              // 整数
              if (this.cycleObj.cycle < 0) {
                this.cycleObj.cycle = 0;
                return this.$message({
                  message: this.$t('equipmentManagement.shebei132'),
                  type: 'warning',
                });
              }
            }

            if (this.cycleObj.networkOutageDate) {
              this.cycleObj.lockDate = addHours(
                this.cycleObj.networkOutageDate,
                this.cycleObj.cycle,
              );
            } else {
              this.cycleObj.lockDate = '//-//';
            }
          }
        }
      }
    },
    initNetworkingData() {
      // 初始化设置试用期限
      if (this.cycleObj.probationaryPeriod) {
        // 如果试用期限有值就是有期限
        this.cycleObj['isProbationTerm'] = '1';
      } else {
        // 没期限
        this.cycleObj['isProbationTerm'] = '0';
      }

      if (
        this.cycleObj.cycle !== null &&
        this.cycleObj.cycle !== undefined &&
        this.cycleObj.cycle !== ''
      ) {
        // 如果试用期限有值就是有期限
        this.cycleObj['isCycleTerm'] = '1';
      } else {
        // 没期限
        this.cycleObj['isCycleTerm'] = '0';
      }

      this.calculateDate('trialEndTime');
      this.calculateDate('lockDate');
    },
    sureCycle(row) {
      row['isProbationTerm'] = '0';
      row['isCycleTerm'] = '0';

      if (row.probationaryPeriod) {
        row.probationaryPeriod = Number(row.probationaryPeriod);
      }
      if (row.cycle) {
        row.cycle = Number(row.cycle);
      }
      this.cycleObj = JSON.parse(JSON.stringify(row));
      // 点击联网周期设置初始化表单数据
      this.initNetworkingData();
      this.oldCycleObj = JSON.parse(JSON.stringify(this.cycleObj));
    },
    cycleValueChange(value, row) {},

    networkingCance(id) {
      this.tableData = JSON.parse(JSON.stringify(this.oldTableData));
      this.$refs[id].doClose();
    },
    getChange() {
      if (
        this.oldCycleObj.isProbationTerm === this.cycleObj.isProbationTerm &&
        this.oldCycleObj.isCycleTerm === this.cycleObj.isCycleTerm &&
        this.oldCycleObj.probationaryPeriod === this.cycleObj.probationaryPeriod &&
        this.oldCycleObj.cycle === this.cycleObj.cycle
      ) {
        return true;
      }
    },
    // 返回有限制还是无限制的文字
    returnText(value) {
      let label = '';
      let needArr = this.cycleOption.filter((f) => f.value === value);
      if (needArr && needArr.length > 0) {
        label = needArr[0].label;
      }
      return label;
    },
    // 将操作改变日志组织传递给后端
    transmitLog(row) {
      row['operationLog'] = '';

      // 设置试用期限部分
      if (this.oldCycleObj.isProbationTerm !== this.cycleObj.isProbationTerm) {
        if (this.cycleObj.isProbationTerm === '0') {
          // 变成了无限制
          row['operationLog'] = '设置试用期限从有限制到无限制;';
        } else {
          // 试用期限变化了
          row['operationLog'] = `设置试用期限从${this.returnText(
            this.oldCycleObj.isProbationTerm,
          )}变为${this.returnText(this.cycleObj.isProbationTerm)},设置试用期限为${
            this.cycleObj.probationaryPeriod
          }天;`;
        }
      } else {
        if (this.cycleObj.isProbationTerm === '1') {
          // 试用期限没变化，但是数字变化了
          if (this.oldCycleObj.probationaryPeriod !== this.cycleObj.probationaryPeriod) {
            row[
              'operationLog'
            ] = `设置试用期限从${this.oldCycleObj.probationaryPeriod}天变为${this.cycleObj.probationaryPeriod}天;`;
          }
        }
      }

      // 设置联网周期期限部分
      if (this.oldCycleObj.isCycleTerm !== this.cycleObj.isCycleTerm) {
        if (this.cycleObj.isCycleTerm === '0') {
          // 变成了无限制
          row['operationLog'] += '设置联网周期从有限制到无限制';
        } else {
          // 设置联网周期变化了
          row['operationLog'] += `设置联网周期从${this.returnText(
            this.oldCycleObj.isCycleTerm,
          )}变为${this.returnText(this.cycleObj.isCycleTerm)},设置联网周期为${
            this.cycleObj.cycle
          }小时;`;
        }
      } else {
        if (this.cycleObj.isCycleTerm === '1') {
          // 设置联网周期没变，但是数字变化了
          if (this.oldCycleObj.cycle !== this.cycleObj.cycle) {
            row[
              'operationLog'
            ] += `设置联网周期从${this.oldCycleObj.cycle}小时变为${this.cycleObj.cycle}小时;`;
          }
        }
      }

      // 设置试用开始时间部分
      if (this.oldCycleObj.trialStartTime !== this.cycleObj.trialStartTime) {
        row[
          'operationLog'
        ] += `试用开始时间从${this.oldCycleObj.trialStartTime}改为${this.cycleObj.trialStartTime};`;
      }

      // 设置预期试用到期时间部分
      if (this.oldCycleObj.trialEndTime !== this.cycleObj.trialEndTime) {
        row[
          'operationLog'
        ] += `预期试用到期时间从${this.oldCycleObj.trialEndTime}改为${this.cycleObj.trialEndTime};`;
      }
    },
    networkingSubmit(row) {
      let changeValue = this.getChange();
      if (changeValue) {
        this.$refs[row.id].doClose();
        return false;
      } else {
        this.transmitLog(row);
      }
      if (row.isProbationTerm === '1') {
        if (row.probationaryPeriod < 1) {
          return this.$message({
            message: this.$t('equipmentManagement.shebei95'),
            type: 'warning',
          });
        }
      } else {
        row.probationaryPeriod = '';
      }

      if (row.isCycleTerm === '1') {
        if (row.cycle < 0 || row.cycle > 720) {
          return this.$message({
            message: this.$t('equipmentManagement.shebei132'),
            type: 'warning',
          });
        }

        if (Math.floor(row.cycle * 10) / 10 !== row.cycle) {
          return this.$message({
            message: this.$t('equipmentManagement.shebei132'),
            type: 'warning',
          });
        }
      } else {
        row.cycle = '';
      }

      this.$http.post('/deviceStatus/saveDate', row).then(({ data: res }) => {
        if (res.msg === 'success') {
          this.$message.success(this.$t('equipmentManagement.shebei94'));
          this.$refs[row.id].doClose();
          this.getDetailList();
        } else {
          return this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top_nav {
  // height: 77px;
  box-sizing: border-box;

  .top_nav_inner {
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
  }
}

.equipmet_inner {
  margin-top: 20px;
}

.set_cycle_box {
  .el-row {
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
  }

  .set_cycle_title {
    color: #003e67;
  }

  .interval_box {
    .el-input {
      width: calc(100% - 50px);
    }

    span {
      display: inline-block;
      width: 50px;
    }
  }
}
.operation_box {
  .el-button--text {
    margin-left: 10px;
  }
}
</style>
